<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学校查询名单列表</title>
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
    <script src="{{asset('js/app.js')}}"></script>
    <script src="{{asset('js/bootstrap.js')}}"></script>
    <style>
        .row{
            margin: 10px auto;
        }
        .add_btn{
            margin-left: 100px;
        }
    </style>
</head>
<body>
<h2 style="text-align: center;">学校查询名单匹配列表</h2>
<form class="row" action="list">
    <div class="col-lg-5">
        <label class="sr-only" for="school_title">学校名称</label>
        <input type="text" class="form-control" id="school_title" name="school_title" placeholder="学校名称">
    </div>
    <div class="col-lg-5">
        <label class="sr-only" for="not_finish_tel">查询电话</label>
        <input type="text" class="form-control" id="not_finish_tel" name="not_finish_tel" placeholder="查询名单电话">
    </div>
    <button type="submit" class="btn btn-primary">搜 索</button>
    <button type="button" class="btn btn-primary add_btn"  data-bs-toggle="modal" data-bs-target="#addModal" >添 加</button>
</form>

    <table class="table table-striped">
        <tr>
            <td>学校名称</td>
            <td>联系邮箱</td>
            <td>心理测评负责人</td>
            <td>联系电话</td>
            <td>学生复检负责人</td>
            <td>联系电话</td>
            <td>是否有设备</td>
            <td>查看未完成名单</td>
            <td>操作</td>
        </tr>
        @foreach($data as $v)
        <tr>
            <td>{{$v->school_title}}</td>
            <td>{{$v->email}}</td>
            <td>{{$v->mind_teacher}}</td>
            <td>{{$v->mind_tel}}</td>
            <td>{{$v->recheck_teacher}}</td>
            <td>{{$v->recheck_tel}}</td>
            <td>@if($v->need_device == 1) 有 @else 没有 @endif </td>
            <td>{{$v->not_finish_tel}}</td>
            <td>
                <button data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="newInfo({{ json_encode($v,TRUE)}})">编辑</button>
            </td>
        </tr>
        @endforeach
    </table>
    <div style="text-align: center; padding-left: 40%;">
        {{ $data->links() }}
    </div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">学校信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">X</button>
            </div>
            <form class="form-horizontal" id="info" >
            <div class="modal-body">
                    <input type="hidden" name="id" id="id" value="">

                    <div class="mb-3">
                        <label for="schoolTitle" class="col-form-label">学校官方名称:</label>
                        <input type="text" class="form-control" id="schoolTitle"  name="school_title">
                    </div>
                    <div class="mb-3">
                        <label for="email" class="col-form-label">邮箱:</label>
                        <input type="text" class="form-control" id="email" name="email">
                    </div>
                    <div class="mb-3">
                        <label for="mind_teacher" class="col-form-label">心理老师:</label>
                        <input type="text" class="form-control" id="mind_teacher" name="mind_teacher">
                    </div>
                    <div class="mb-3">
                        <label for="mind_tel" class="col-form-label">联系电话:</label>
                        <input type="text" class="form-control" id="mind_tel" name="mind_tel">
                    </div>
                    <div class="mb-3">
                        <label for="recheck_teacher" class="col-form-label">复检师:</label>
                        <input type="text" class="form-control" id="recheck_teacher" name="recheck_teacher">
                    </div>
                    <div class="mb-3">
                        <label for="recheck_tel" class="col-form-label">复检师电话:</label>
                        <input type="text" class="form-control" id="recheck_tel" name="recheck_tel">
                    </div>
                    <div class="mb-3">
                        <label for="notFinishTel" class="col-form-label">查询名单电话:</label>
                        <input type="text" class="form-control" id="notFinishTel" name="not_finish_tel">
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="handleInfo()">修改</button>
            </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addModalLabel">学校信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">X</button>
            </div>
            <form class="form-horizontal" id="addInfo" >
            <div class="modal-body">
                <div class="mb-3">
                    <input type="hidden" name="province" value="510000">
                    <input type="hidden" name="city" value="510100">
                    <input type="hidden" name="level" >
                    <input type="hidden" name="category" >
                    <input type="hidden" name="motor_room" value="11111">
                    <input type="hidden" name="computer_number" value="11111">
                    <select class= "form-control selectpicker" name="area" >
                        <option value="" disabled selected hidden>选择学校所在区县</option>
                        @foreach($areaData as $v)
                        <option value="{{$v['id']}}"> {{$v['name']}}</option >
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="输入学校名称(和系统一致)"  name="school_title">
                </div>
                <div class="mb-3">
                    <input type="text" class="form-control"  placeholder="输入学校税号"  name="tax_number">
                </div>

                <div class="mb-3">
                    <input type="text" class="form-control"  placeholder="联系邮箱"  name="email">
                </div>
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="心理测评负责人"  name="mind_teacher">
                </div>
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="联系电话" id="mindTel"  name="mind_tel" onblur='getMindTel()'>
                </div>
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="学生复检负责人"  name="recheck_teacher">
                </div><div class="mb-3">
                    <input type="text" class="form-control"  placeholder="联系电话"  name="recheck_tel">
                </div>
                <div class="mb-3">
                    <select class= "form-control selectpicker" name="need_device" >
                        <option value="" disabled selected hidden>学校是否有机房</option>
                        <option value="1">有</option>
                        <option value="2">没有</option>
                    </select>
                </div>
                <div class="mb-3">
                    <input type="text" class="form-control"  placeholder="查看未完成名单账号" id="notTel"  name="not_finish_tel">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="handleAddInfo()" >添加</button>
            </div>
            </form>
        </div>

    </div>
</div>
</body>
</html>
<script>

  function newInfo(e){
      $("#id").val(e.id);
      $("#area").val(e.area);
      $("#schoolTitle").val(e.school_title);
      $("#email").val(e.email);
      $("#mind_teacher").val(e.mind_teacher);
      $("#mind_tel").val(e.mind_tel);
      $("#recheck_teacher").val(e.recheck_teacher);
      $("#recheck_tel").val(e.recheck_tel);
      $("#need_device").val(e.need_device);
      $("#notFinishTel").val(e.not_finish_tel);
    }

  /**
   * 修改信息
   */
  function handleInfo(){
        $.ajax({
            type:'POST',//提交类型
            dataType:'json',//数据形式
            url:"{{url('api/teacher/editInfo')}}",//提交的url
            data:$("#info").serialize(),//序列化为可以传输的数据
            success:function (res) {//如果成功返回的信息res
                $('#exampleModal').modal('hide')
                commonUtil.message(res.msg)
                setInterval(()=>{
                    history.go(0);
                },2500)

            },
        })
    }

  /**
   * 添加数据
   */
  function handleAddInfo(){
      $.ajax({
          type:'POST',//提交类型
          dataType:'json',//数据形式
          url:"{{url('api/addSchool')}}",//提交的url
          data:$("#addInfo").serialize(),//序列化为可以传输的数据
          success:function (res) {//如果成功返回的信息res
              $('#addModal').modal('hide')
              commonUtil.message(res.msg)
              setInterval(()=>{
                  history.go(0);
              },2500)

          },
      })
  }
  function getMindTel(){
        let tel = $('#mindTel').val();
        // console.log(tel)
        $('#notTel').val(tel);
    }
     let commonUtil = {
      /**
       * 弹出消息框
       * @param msg 消息内容
       * @param type 消息框类型（参考bootstrap的alert）
       */
      alert: function(msg, type){
          if(typeof(type) =="undefined") { // 未传入type则默认为success类型的消息框
              type = "success";
          }
          // 创建bootstrap的alert元素
          var divElement = $("<div></div>").addClass('alert').addClass('alert-'+type).addClass('alert-dismissible').addClass('col-md-4').addClass('col-md-offset-4');
          divElement.css({ // 消息框的定位样式
              "position": "absolute",
              "top": "120px",
              'left': '400px'

          });
          divElement.text(msg); // 设置消息框的内容
          // 消息框添加可以关闭按钮
          var closeBtn = $('<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>');
          $(divElement).append(closeBtn);
          // 消息框放入到页面中
          $('body').append(divElement);
          return divElement;
      },

      /**
       * 短暂显示后上浮消失的消息框
       * @param msg 消息内容
       * @param type 消息框类型
       */
      message: function(msg, type) {
          var divElement = commonUtil.alert(msg, type); // 生成Alert消息框
          var isIn = false; // 鼠标是否在消息框中

          divElement.on({ // 在setTimeout执行之前先判定鼠标是否在消息框中
              mouseover : function(){isIn = true;},
              mouseout  : function(){isIn = false;}
          });

          // 短暂延时后上浮消失
          setTimeout(function() {
              var IntervalMS = 20; // 每次上浮的间隔毫秒
              var floatSpace = 60; // 上浮的空间(px)
              var nowTop = divElement.offset().top; // 获取元素当前的top值
              var stopTop = nowTop - floatSpace;    // 上浮停止时的top值
              divElement.fadeOut(IntervalMS * floatSpace); // 设置元素淡出

              var upFloat = setInterval(function(){ // 开始上浮
                  if (nowTop >= stopTop) { // 判断当前消息框top是否还在可上升的范围内
                      divElement.css({"top": nowTop--}); // 消息框的top上升1px
                  } else {
                      clearInterval(upFloat); // 关闭上浮
                      divElement.remove();    // 移除元素
                  }
              }, IntervalMS);

              if (isIn) { // 如果鼠标在setTimeout之前已经放在的消息框中，则停止上浮
                  clearInterval(upFloat);
                  divElement.stop();
              }

              divElement.hover(function() { // 鼠标悬浮时停止上浮和淡出效果，过后恢复
                  clearInterval(upFloat);
                  divElement.stop();
              },function() {
                  divElement.fadeOut(IntervalMS * (nowTop - stopTop)); // 这里设置元素淡出的时间应该为：间隔毫秒*剩余可以上浮空间
                  upFloat = setInterval(function(){ // 继续上浮
                      if (nowTop >= stopTop) {
                          divElement.css({"top": nowTop--});
                      } else {
                          clearInterval(upFloat); // 关闭上浮
                          divElement.remove();    // 移除元素
                      }
                  }, IntervalMS);
              });
          }, 2000);
      }
  }
</script>